<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>141_事件</title>
	</head>
	<body>
		<button id="btn" onclick="alert('点我干嘛')">点我一下</button>
		<!-- 双击 -->
		<button id="btn" ondblclick="alert('点我干嘛')">点我一下</button>
		<!-- 鼠标进入 -->
		<button id="btn" onmouseenter="alert('点我干嘛')">点我一下</button><br /><br />
		<button id="btn_2">绑定函数2</button>
		<button id="btn_3">绑定函数3</button>
		<script>
			/*
			事件(event)
				-事件就是用户和页面之间发生的交互行为
					比如:点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键...
				-可以通过为事件绑定响应函数(回调函数)，来完成和用户之间的交互
				- 绑定响应函数的方式:
					1.可以直接在元素的属性中设置;
					2.可以通过为元素的指定属性设置回调函数的形式来绑定事件;
						(一个事件只能绑定一个响应函数,后面的会覆盖掉前面的)
					3.可以通过元素addEventListener()方法来绑定事件;
			 */

			let btn2 = document.getElementById("btn_2");
			//为按钮对象的事件属性设置响应函数
			btn2.onclick = function(event) {
				console.log(event);
			}
			btn2.onclick = function() {
				console.log("会覆盖掉前面的事件");
			}

			let btn3 = document.getElementById("btn_3");
			/* 第一个参数：事件描述
							click 单击
							dblclick 双击
			 */
			btn3.addEventListener("click", function() {
				alert("hahah 1")
			})
			btn3.addEventListener("click", function() {
				alert("hahah 2")
			})
			btn3.addEventListener("click", function() {
				alert("hahah 3")
			})
		</script>
	</body>
</html>